<template>
  <div>
    <div class="container">
      <div id="echart"></div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
        option:{}
    };
  },
  // 页面初始化挂载dom
  mounted() {
    this.getLoadEcharts();
    // console.log(this.option.series[0].data);
  },
  methods: {
    getLoadEcharts() {
      //基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("echart"));

      let option = {
        xAxis: {
          type: "category",
          //   data: ["A", "B", "C", "D", "E", "F"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 300, 50, 120],
            type: "line",
          },
        ],
      };
      this.option = option
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.container {
  padding-top: 50px;
  width: 80vw;
  height: 70vh;
  margin-left: 30px;
}
#echart {
  width: 100%;
  height: 100%;
}
</style>